<template>
  <div class="helper-list-container" v-loading="loading">
    <div class="helper-title">支持人员</div>
    <div class="helper-subtitle">任何填报问题请于工作时间联系</div>
    <div class="helper-list">
      <div class="helper-item" v-for="(item, index) in helperList" :key="index">
        <div class="helper-item__name">{{ item.realName }}</div>
        <div class="helper-item__phone">电话：{{ item.phone }}</div>
        <div class="helper-item__email">邮箱：{{ item.email }}</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'HelperList'
};
</script>
<script lang="ts" setup>
import { ref } from 'vue';
import { getSupportPersonnel } from '@/apis/todo/flow';
import type { GetSupportPersonnelResult } from '@/apis/todo/model/flowModel';
const loading = ref(false);
const helperList = ref<GetSupportPersonnelResult[]>([]);

async function getData() {
  loading.value = true;
  try {
    helperList.value = await getSupportPersonnel();
    loading.value = false;
  } catch (error) {
    console.log('error', error);
    helperList.value = [];
    loading.value = false;
  }
}

getData();
</script>
<style lang="scss" scoped>
.helper-list-container {
  padding: 24px;
  .helper-title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #0a1f33;
    line-height: 22px;
    text-align: left;
    font-style: normal;
  }
  .helper-subtitle {
    margin-top: 2px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #7a8a99;
    line-height: 20px;
    text-align: left;
    font-style: normal;
  }
  .helper-list {
    .helper-item__name {
      margin-top: 20px;
      margin-bottom: 4px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #0a1f33;
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }
    .helper-item__phone,
    .helper-item__email {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #7a8a99;
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }
  }
}
</style>
